<template>
<div class="container">

       <div class="swiper">
  <swiper :list="demo01_list" height="200px"></swiper>
       </div>
  <div class="content2">
        <img  src="../../../static/images/nav-1.png" @click="zhenzu">
         <img  src="../../../static/images/nav-2.png" @click="hezu">
          <img src="../../../static/images/nav-3.png" @click="choose">
          <div >整租</div>
          <div>合租</div>
          <div >地图</div>

  </div>

<div class="centent3">
    <div class="key">
        <div class="my">租房小组</div>
        <div class="my">更多</div>
    </div>

  </div>
  <div class="content4">
      <div class="item">
        <div class="left">
            <div>敬请期待</div>
            <div>敬请期待</div>
        </div>
        <img src="../../../static/groups/1.png">
      </div>
      <div class="item">
         <div class="left">
              <div>敬请期待</div>
            <div>敬请期待</div>
        </div>
        <img src="../../../static/groups/2.png">
      </div>
      <div class="item">
         <div class="left">
              <div>敬请期待</div>
            <div>敬请期待</div>
        </div>
        <img src="../../../static/groups/3.png">
      </div>
       <div class="item">
         <div class="left">
              <div>敬请期待</div>
            <div>敬请期待</div>
        </div>
        <img src="../../../static/groups/4.png">
      </div>
  </div>
  <buttom present='index'></buttom>
</div>

</template>

<script>
import { XInput, Group, XButton, Cell } from 'vux'
import { Divider } from 'vux'
  import { Swiper } from 'vux'
  import { Search } from 'vux'
    import Buttom from '../util/buttom.vue'
   const baseList = [{
            url: 'javascript:',
            img: './static/swiper/1.png',
            title: ''
          }, {
            url: 'javascript:',
         img: './static/swiper/2.png',
            title: ''
          }, {
            url: 'javascript:',
           img: './static/swiper/3.png',
            title: '',
          }];


    export default {
      name:'Index',
      components: {
        Swiper,Search,Group,Divider,
            Buttom
      },
      methods:{
        zhenzu(){
          var storage=window.localStorage;
          storage["payway"]="整租"
          this.$router.push("/filter")
        },
        hezu(){
          var storage=window.localStorage;
          storage["payway"]="合租"
          this.$router.push("/filter")
        },
        categorie(){
          this.$router.push("/filter")
        },
        choose(){
          this.$router.push("/Choose")
        }
      },
      data(){
        return {
         demo01_list: baseList,


      }
    }
    }
</script>

<style scoped lang='less'>

            hr{
                width: 80%;
                color: rgba(0,0,0,0.1);
            }
    .container{

        .content4{
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            .item{
                background-color: white;
                height: 70px;
                margin: 5px;
                width: 45%;
               display: flex;
               justify-content: space-between;
               .left{
                   display: flex;
                   flex-direction: column;
                   div{
                       font-size: 13px;
                   }
                     width: 45%;
               }
               img{
                    width: 45%;
               }
            }
        }
        .centent3{
                height: 50px;
                 width: 100%;
                 display: flex;
                .key{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    flexf-wrap: nowrap;
                    .my{
                        line-height: 50px;
                        font-size: 20px;
                        height: 100%;
                        width: 100px;
                        text-align: center;
                        font-weight: 600;
                    }
                }
            }
        background-color: rgb(242,242,242);
        .content2{

            background-color: white;
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            img{
                height: 85px;
                width: 85px;
                margin-left: 20px;
                margin-right: 20px;
            }
            div{
                line-height: 20px;
                font-size: 20px;
                text-align: center;
                    height: 30px;
                width: 85px;
                margin-left: 20px;
                margin-right: 20px;
            }
        }

        #top{
            background-color: white;
            position: absolute;
            top:10px;
            z-index: 4;;
            display: flex;
            width: 100%;
            display: flex;

            #in{
                height: 20px;
                background-color: white;
                width: 80%;
                border: 0px;
                border-radius: 5%;

            }
        }


    }

</style>
